<template>
  <div class="box">
    <!-- 头部 -->
    <div class="box-hd">
      <h2 class="title-div">
        <span class="fl">{{ title }}</span>
        <div class="fr">
          <el-button type="primary" size="small" @click="add">新增</el-button>
        </div>
      </h2>
    </div>
    <!-- 内容区 -->
    <el-row class="box-bd">
      <el-col :span="6" class="left-side">
        <h3 class="side-hd">类别</h3>
        <div id="side-list">
          <el-tree
            :data="typeList"
            node-key="id"
            default-expand-all
            :props="{label: 'name',value: 'id'}"
            :expand-on-click-node="false"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <el-button
                type="text"
                size="mini"
                @click="typeDel(node, data)"
                class="btn-link"
                v-show="btnState"
              >
                <i class="el-icon-delete"></i>
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="typeEdit(data)"
                class="btn-link"
                v-show="btnState"
              >
                <i class="el-icon-edit"></i>
              </el-button>
            </span>
          </el-tree>
          <div class="add-box" v-show="btnState">
            <el-link type="primary" @click="typeAdd" :underline="false">新增类别</el-link>
          </div>
        </div>
        <div class="btn-box">
          <el-link type="primary" v-show="!btnState" @click="btnState=true" :underline="false">编辑</el-link>
          <el-link type="primary" v-show="btnState" @click="btnState=false" :underline="false">完成</el-link>
        </div>
      </el-col>
      <el-col :span="18" class="p30">
        <ul class="tab-nav clearfix">
          <li
            v-for="(t,index) in contractTypes"
            :class="{active:activeIndex === index}"
            @click="changeState(index)"
            :key="index"
          >{{ t }}</li>
        </ul>
        <!-- 筛选条件 -->
        <div class="search-box">
          <el-button icon="el-icon-search" size="small">筛选</el-button>
        </div>
        <!-- 列表数据 -->
        <div class="list-box">
          <el-table
            :data="tableData"
            max-height="500px"
            stripe
            class="table-list"
            v-loading="loading"
            @row-click="rowClick"
          >
            <el-table-column prop="contractId" label="合同编号"></el-table-column>
            <el-table-column label="合同类型">
              <template slot-scope="scope">{{ typeOptions[scope.row.contractType].label }}</template>
            </el-table-column>
            <el-table-column prop="customer.customerName" label="所属客户"></el-table-column>
            <el-table-column prop="projects.projectName" label="所属项目"></el-table-column>
            <el-table-column prop="signDate" label="合同签订日期"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click.stop="edit(scope.row.id)">编辑</el-button>
                <el-button type="text" @click.stop="del(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchData.currentPage"
            :page-sizes="[15, 25, 30, 50]"
            :page-size="searchData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.size"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
    <!-- 新增 -->
    <el-dialog
      title="新增合同"
      :visible.sync="dialogAdd"
      :fullscreen="true"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <contract-add ref="addDialog" @changeState="dialogAdd=$event" @reload="initTableData"></contract-add>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog
      title="编辑合同"
      :visible.sync="dialogEdit"
      :fullscreen="true"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <contract-edit ref="editDialog" @changeState="dialogEdit=$event" @reload="initTableData"></contract-edit>
    </el-dialog>
    <!-- 详情 -->
    <el-dialog
      title="合同详情"
      :visible.sync="dialogDetail"
      :fullscreen="true"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <contract-detail ref="detailDialog" @changeState="dialogDetail=$event"></contract-detail>
    </el-dialog>
    <!-- 新增 -->
    <el-dialog
      title="新增类别"
      :visible.sync="typeDialogAdd"
      width="500px"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <type-add ref="typeAddDialog" @changeState="typeDialogAdd=$event" @reload="initTypeList"></type-add>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog
      title="编辑类别"
      :visible.sync="typeDialogEdit"
      width="500px"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <type-edit ref="typeEditDialog" @changeState="typeDialogEdit=$event" @reload="initTypeList"></type-edit>
    </el-dialog>
  </div>
</template>
<script>
import { findList, del } from '@/api/contract'
import { findList as findTypeList, del as typeDel } from '@/api/type'
import ContractAdd from './contract-add.vue'
import ContractEdit from './contract-edit.vue'
import ContractDetail from './contract-detail.vue'
import TypeAdd from '../type/type-add.vue'
import TypeEdit from '../type/type-edit.vue'
export default {
  components: {
    ContractAdd,
    ContractEdit,
    ContractDetail,
    TypeAdd,
    TypeEdit
  },
  data() {
    return {
      btnState: false,
      formLabelWidth: '120px',
      title: '',
      activeIndex: 0,
      companyId: this.$store.state.user.companyId,
      dialogEdit: false,
      dialogAdd: false,
      dialogDetail: false,
      typeDialogEdit: false,
      typeDialogAdd: false,
      tableData: [],
      typeOptions: [
        {
          id: 0,
          val: 'purchase',
          label: '采购合同'
        },
        {
          id: 1,
          val: 'sales',
          label: '销售合同'
        },
        {
          id: 2,
          val: 'others',
          label: '其他合同'
        }
      ],
      contractTypes: ['全部', '待审批', '进行中', '已完成'],
      loading: false,
      typeList: [],
      searchData: {
        contractType: '',
        allTypeId: '',
        currentPage: 1,
        pageSize: 15
      }
    }
  },
  mounted() {
    this.initTitle()
    this.initTypeList()
    this.initTableData()
  },
  methods: {
    initTitle() {
      let name = this.$route.name
      let obj = this.typeOptions.filter(res => res.val === name)[0]
      this.title = obj.label
      this.searchData.contractType = obj.id
    },
    changeState(index) {
      this.activeIndex = index
      this.searchData.state = this.activeIndex === 0 ? '' : this.activeIndex - 1
      this.searchData.currentPage = 1
      this.initTableData()
    },
    initTableData() {
      this.loading = true
      findList(
        this.companyId,
        this.searchData.contractType,
        this.searchData.allTypeId
      ).then(res => {
        this.tableData = res.data
        this.loading = false
      })
    },
    edit(id) {
      this.dialogEdit = true
      let _this = this
      this.$nextTick(() => {
        _this.$refs.editDialog.initDialogData(id)
      })
    },
    add() {
      this.dialogAdd = true
      let _this = this
      this.$nextTick(() => {
        _this.$refs.addDialog.initDialogData(this.searchData.contractType)
      })
    },
    del(row) {
      del(row).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.searchData.currentPage = 1
          this.initTableData()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    initTypeList() {
      findTypeList(this.companyId, 3).then(res => {
        this.typeList = res.data
      })
    },
    typeAdd() {
      this.typeDialogAdd = true
      let _this = this
      this.$nextTick(() => {
        _this.$refs.typeAddDialog.initDialogData(3)
      })
    },
    typeEdit(row) {
      this.typeDialogEdit = true
      let _this = this
      this.$nextTick(() => {
        _this.$refs.typeEditDialog.initDialogData(row.id, row.type)
      })
    },
    typeDel(node, row) {
      typeDel(row).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.initTypeList()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 行点击事件
    rowClick(row, column, event) {
      this.dialogDetail = true
      let _this = this
      this.$nextTick(() => {
        _this.$refs.detailDialog.initDialogData(row.id)
      })
    },
    handleSizeChange(val) {
      this.searchData.pageSize = val
      this.searchData.currentPage = 1
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.searchData.currentPage = val
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="scss" scoped>
.box-bd {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 68px;
  .side-bar {
    padding: 25px;
  }
  .table-list {
    margin-bottom: 15px;
  }
  .list-box {
    li {
      height: 30px;
      line-height: 30px;
    }
  }
}
.tab-nav {
  margin-bottom: 15px;
  margin-left: 100px;
  li {
    float: left;
    height: 35px;
    line-height: 35px;
    font-size: 16px;
    margin: 0 25px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    &.active {
      border-bottom-color: #1989fa;
      color: #1989fa;
    }
  }
}
.left-side {
  position: relative;
  height: 100%;
  border-right: 1px solid #e4eaf0;
  .add-box {
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .side-hd {
    height: 35px;
    line-height: 36px;
    color: #909399;
    padding: 0 24px;
    font-size: 14px;
  }
  .btn-box {
    @extend .add-box;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid #e4eaf0;
  }
}
</style>
